import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ScrollView,
  Modal,
  Dimensions,
  Image,
  TouchableWithoutFeedback
} from 'react-native';
import HTML from 'react-native-render-html';
import ImageViewer from 'react-native-image-zoom-viewer';
import _ from 'lodash';

export default class ImageViewerPage extends Component {
  content = `<p style="text-align: center;"><img src="/down/ueditor/20181112/7facdb3c57694ca7bfc13f49e1aff6f0.png?width=600" title="" alt=""/></p><p>&nbsp; &nbsp; &nbsp; 10月29日至11月2日，宜昌市“两新”组织党建专题培训班在厦门城市党建学院（创新院部）顺利举办。本次培训由市委组织部副部长潘兴宏带队，宜昌市“两新”组织党组织书记、党务工作者代表共65人参加。</p><p style="text-align: center;"><img src="/down/ueditor/20181112/224248e88b9e4cb09b742dc581a8b605.png?width=600" title="" alt=""/></p><p>&nbsp; &nbsp; &nbsp; 市委组织部副部长潘兴宏作开班动员讲话，要求全体学员充分认识组织“两新”党建专题培训班的重要意义，把“两新”党建作为深入推进全面从严治党的题中应有之义，把提升“两新”党建水平作为抓实“百日提升行动”补齐短板弱项的基础工作，把厦门经验作为宜昌学习跟进的重要参照标准，强化责任担当，增强参训自觉。要突出质量确保学到经验取到真经，全体学员要集中精力认真学，研讨交流互动学，联系实际扎实学，强化感性认识，学习经验做法，把握理性规律，不断提高抓工作的专业思维、专业素养、专业方法。要端正学风严守纪律规矩，班委会要全面发挥作用，全体学员要全身心投入学习，全过程严守培训纪律，全方位展示自身形象、宜昌形象。</p><p style="text-align: center;"><img src="/down/ueditor/20181112/1d27b518a0b246ccb9e5a03ca79f9ece.png?width=600" title="" alt=""/></p><p>&nbsp; &nbsp; &nbsp; 培训结束后，学员们纷纷表示受益匪浅、学有所获，回到工作岗位，将消化本次所学，结合本单位、本系统、本区域的实际，将两新组织党建工作提升到新的高度，不断夯实党的执政基础，促进非公有制经济和社会组织健康有序发展，为宜昌经济社会建设贡献自己的力量。</p><p><br/></p>`;
  images = [];

  constructor(props) {
    super(props);
    this.state = { showModal: false };
  }

  closeModal = () => {
    this.setState({ showModal: false });
  };
  renderers = {
    img: htmlAttribs => {
      let src = htmlAttribs.src;
      if (!_.startsWith(src, 'http')) {
        src = `http://119.36.136.218:9002${htmlAttribs.src}`;
      }
      let imgIndex = _.findIndex(this.images, { url: src });
      if (imgIndex < 0) {
        imgIndex = this.images.length;
        this.images.push({ url: src });
      }

      return (
        <TouchableWithoutFeedback
          key={htmlAttribs.src}
          onPress={() => {
            this.setState({ showModal: true, imgIndex });
          }}
        >
          <Image
            resizeMode="cover"
            source={{ uri: src }}
            style={detailStyles.img}
          />
        </TouchableWithoutFeedback>
      );
    }
  };
  render() {
    return (
      <View style={{ flex: 1, paddingTop: 20 }}>
        <ScrollView style={detailStyles.container}>
          <HTML
            tagsStyles={{
              p: {
                fontSize: 16,
                color: '#666',
                lineHeight: 22
              }
            }}
            html={`<html><body>${this.content}</body></html>`}
            renderers={this.renderers}
          />
          <View style={{ height: 40 }} />
          <Modal visible={this.state.showModal} transparent={true}>
            <ImageViewer
              imageUrls={this.images}
              enableSwipeDown
              onSwipeDown={this.closeModal}
              index={this.state.imgIndex}
            />
          </Modal>
        </ScrollView>
      </View>
    );
  }
}

const detailStyles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
    backgroundColor: '#FFF'
  },
  img: {
    width: Dimensions.get('window').width - 16 * 2,
    height: ((Dimensions.get('window').width - 16 * 2) * 9) / 16,
    borderRadius: 3,
    marginVertical: 16
  }
});
